<template>
  <div class="LineChartGroup">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="24" :lg="24" :xl="24">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <!-- <span>自助机每周使用情况折线图</span> -->
          </p>
          <line-chart :chart-data="lineChartItem" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './components-group/LineChartTwo'

export default {
  components: {
    LineChart
  },
  props: {
    itemsInfo: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      lineChartItem: []
    }
  },
  mounted() {
    // eight
    this.$nextTick(() => {
      this.initLineChart()
    })
  },
  methods: {
    initLineChart() {
      this.lineChartItem = this.itemsInfo
      // this.itemsInfo.forEach((res) => {
      //   this.lineChartItem.expectedData.push(res)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.LineChartGroup {
  margin-top: 30px;
  .chart-wrapper {
    padding: 0 20px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 11px 11px rgba(95, 125, 247, 0.1);
    border-radius: 5px;
    margin-bottom: 10px;
    .line-warp-title {
      padding-top: 10px;
      // margin: 10px 0;
      font-size: 16px;
      color: #333333;
    }
  }
}
</style>
